<template>
  <div class="question-query">
    <div class="form-box">
      <strong>查询参数</strong>
      <mu-flex align-items="center" class="form-line">
        <span class="form-line-item">审核状态：</span>
        <mu-radio v-model="form.status" class="form-line-item" value="all" label="不限"></mu-radio>
        <mu-radio v-model="form.status" class="form-line-item" value="none" label="未审核"></mu-radio>
        <mu-radio v-model="form.status" class="form-line-item" value="pass" label="已通过"></mu-radio>
        <mu-radio v-model="form.status" class="form-line-item" value="fail" label="不通过"></mu-radio>
      </mu-flex>
      <mu-flex align-items="center" class="form-line">
        <span class="form-line-item">题目形式：</span>
        <mu-radio v-model="form.style" class="form-line-item" value="all" label="不限"></mu-radio>
        <mu-radio v-model="form.style" class="form-line-item" value="choose" label="选择"></mu-radio>
        <mu-radio v-model="form.style" class="form-line-item" value="blank" label="填空"></mu-radio>
      </mu-flex>
      <mu-flex align-items="center" class="form-line">
        <span class="form-line-item">关键字：</span>
        <mu-radio v-model="form.keyword" class="form-line-item" value="off" label="关闭"></mu-radio>
        <mu-radio v-model="form.keyword" class="form-line-item" value="on" label="启用"></mu-radio>
        <mu-text-field v-if="form.keyword === 'on'" v-model="form.content" placeholder="请在这里输入关键字"></mu-text-field>
      </mu-flex>
      <mu-button color="primary" @click="refresh()">搜索</mu-button>
    </div>
    <question-page ref="page" :fetcher="fetchQuestions" @click-row="toShowQuestion"></question-page>
  </div>
</template>

<script>
import QuestionPage from '@/components/QuestionPage'
import api from '@/api'
import { mapMutations } from 'vuex'

export default {
  name: 'QuestionQuery',
  components: {
    QuestionPage
  },
  data() {
    return {
      form: {
        status: 'all',
        style: 'all',
        keyword: 'off',
        content: ''
      }
    }
  },
  watch: {
    form(val) {
      this.setCache(val)
    }
  },
  created() {
    this.form = this.$store.getters.questionQueryCache
  },
  methods: {
    ...mapMutations({
      setCache: 'SET_QUESTION_QUERY_CACHE'
    }),
    fetchQuestions(page) {
      const statusMap = {
        all: null,
        none: 0,
        pass: 1,
        fail: 2
      }
      const styleMap = {
        all: null,
        choose: 0,
        blank: 1
      }
      const payload = {
        status: statusMap[this.form.status],
        style: styleMap[this.form.style],
        content: this.form.keyword === 'on' ? this.form.content : null,
        is_me: null
      }
      return api.queryQuestions(payload, page)
    },
    toShowQuestion({ id }) {
      this.$router.push({
        name: 'question-show',
        params: {
          id
        }
      })
    },
    refresh() {
      this.$refs.page.refresh()
    }
  }
}
</script>

<style scoped>
.form-box {
  padding: 16px;
}
.form-line {
  padding-bottom: 8px;
}
.form-line-item {
  margin-right: 16px;
}
</style>
